<script lang="ts">
import Vue from 'vue'
import Step1 from "@/views/systemTools/systemSalarySettlement/step/step1.vue";
import Step2 from "@/views/systemTools/systemSalarySettlement/step/step2.vue";
import Step3 from "@/views/systemTools/systemSalarySettlement/step/step3.vue";
import Step4 from "@/views/systemTools/systemSalarySettlement/step/step4.vue";

export default Vue.extend({
  name: "systemSalarySettlement",
  components: {Step4, Step3, Step2, Step1},
  data() {
    return {
      active: 0,
      redisKey: ''
    }
  },
  methods: {
    next(data) {
      this.redisKey = data
      this.active++
    },
    prev() {
      this.active--
    }
  }
})
</script>

<template>
  <el-card>
    <div>
      <el-steps :active="active">
        <el-step title="步骤 1" description="上传文件">
        </el-step>
        <el-step title="步骤 2" description="数据确认">
        </el-step>
        <el-step title="步骤 3" description="数据分析结果"></el-step>
        <el-step title="步骤 4" description="佣金计算汇总"></el-step>
      </el-steps>
    </div>
    <div class="body-div">
      <step1 v-if="active===0" @next="next"/>
      <step2 v-if="active===1" :redis-key="redisKey" @next="next" @prev="prev"/>
      <step3 v-if="active===2" :redis-key="redisKey" @next="next" @prev="prev"/>
      <step4 v-if="active===3" :redis-key="redisKey" @next="next" @prev="prev"/>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.body-div {
  margin-top: 20px;
}
</style>
